<template>
  <div class="container">
    <header>
      <div class="title">我的订单</div>
    </header>
    <!-- 订单信息 -->
    <h3>未支付订单信息：</h3>
    <ul class="unpay-order-info">
      <li v-for="(orders,index) in orderslist" :key="index">
        <div v-if="orders.orderState==0">
          <div class="top" @click="change(index)">
            <p>
              {{orders.business.businessName}}
              <i class="fa fa-caret-down"></i>
            </p>
            <div class="top-right">
              <p>&#165;{{orders.orderTotal}}</p>
              <div>去支付</div>
            </div>
          </div>
          <!-- 隐藏区域 -->
          <ul v-show="showflag==index">
            <li v-for="(item,index) in orders.listOrderDetailet" :key="index">
              <p>{{item.food.foodName}} x {{item.quantity}}</p>
              <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
            <li>
              <p>配送费</p>
              <p>&#165;{{orders.business.deliveryPrice}}</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>

    <h3>已支付订单信息：</h3>
    <ul class="unpay-order-info">
      <li v-for="(orders,index) in orderslist" :key="index">
        <div v-if="orders.orderState==1">
          <div class="top" @click="change(index)">
            <p>
              {{orders.business.businessName}}
              <i class="fa fa-caret-down"></i>
            </p>
            <div class="top-right">
              <p>&#165;{{orders.orderTotal}}</p>
            </div>
          </div>
          <!-- 隐藏区域 -->
          <ul v-show="showflag==index">
            <li v-for="(item,index) in orders.listOrderDetailet" :key="index">
              <p>{{item.food.foodName}} x {{item.quantity}}</p>
              <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
            <li>
              <p>配送费</p>
              <p>&#165;{{orders.business.deliveryPrice}}</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer";
export default {
  name: "OrderList",
  components: {
    Footer
  },
  data() {
    return {
      orderslist: [],
      showflag:-1,
    };
  },
  created() {
    let user = this.$getSessionStorage("user");
    //获取当前用户的订单列表信息
    this.$axios
      .get("/OrdersController/listOrdersByUserId?userId=" + user.userId)
      .then(response => {
        this.orderslist = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods:{
      change(index){
          if (this.showflag == index) {
                this.showflag = -1;
          }else{
                this.showflag = index;
          }
      }
  }
};
</script>

<style scoped>
/* *********************** header 部分 ***************************** */
.container header {
  width: 100%;
  height: 12vw;
}
.container header .title {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 4.8vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
/* *********************** 订单信息 部分 ***************************** */
.container h3 {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  font-weight: 300;
  color: #999;
}
.container h3:last-of-type {
  margin-top: 12vw;
}
.container .unpay-order-info .top {
  box-sizing: border-box;
  padding: 2vw 4vw;
  font-size: 4vw;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.container .unpay-order-info .top > p {
  cursor: pointer;
}
.container .unpay-order-info .top .top-right {
  display: flex;
}
.container .unpay-order-info .top .top-right div {
  background-color: #f90;
  color: white;
  border-radius: 3px;
  margin-left: 2vw;
  cursor: pointer;
  user-select: none;
}
/* 隐藏区域 */
.container .unpay-order-info li ul li {
  box-sizing: border-box;
  padding: 1vw 4vw;
  font-size: 3vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>